<template>
  <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width:100%">
    <el-col>
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown @command="operateDepts">
            <!-- 要套一个span标签才能触发下拉事件 -->
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- slot="dropdown"为具名插槽 v-slot:dropdown #dropdown -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="create">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="update">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="delete">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  props: {
    treeNode: {
      required: true,
      type: Object
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async operateDepts(command) {
      // curd  create update retrieve 查询 delete
      switch (command) {
        case 'create':
          this.$emit('addDept', this.treeNode) // 传当前点击的节点，因为是添加子部门，需要知道父节点是谁
          break
        case 'update':
          this.$emit('editDept', this.treeNode) // 当前节点
          break
        case 'delete':
        //   1. 做弹层提示
          try {
            await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            //   2. 调删除接口
            await delDepartments(this.treeNode.id)
            //   3. 再次获取数据
            this.$emit('delDepts')
            this.$message({
              type: 'success',
              message: '删除成功啦'
            })
          } catch (error) {
            console.log(error)
          }

          break
      }
    }
  }
}
</script>

<style>

</style>
